<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{ mid ? '修改' : '新增' }}角色价目</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>角色：</span>
          <div :class="{'error_border':tip_num===1}" >
            <el-select filterable placeholder="请选择角色" v-model="roleId">
              <el-option
                :key="index"
                :label="item.name"
                :value="item.id"
                v-for="(item,index) in roleList">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>商品：</span>
          <div :class="{'error_border':tip_num===2}">
            <el-select filterable placeholder="请选择商品" v-model="productId">
              <el-option
                :key="index"
                :label="item.name"
                :value="item.id"
                v-for="(item,index) in productList">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>价格：</span>
          <div :class="{'error_border':tip_num===3}">
            <el-input placeholder="请输入价格" type="text" v-model="price" onKeypress="return(/[\d.]/.test(String.fromCharCode(event.keyCode)))"></el-input>
          </div>
        </div>
        <p class="error_line">{{ infoTip }}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>

  import {getDetail,addData,updateData} from "@/api/config/roleProduct";
  import {getAllList} from "@/api/sys/role";
  import {listAllData} from "@/api/config/product";

  export default {
    props: ['mid'],
    data() {
      return {
        roleId:'',
        productId:'',
        price:'',
        productList:[],
        roleList:[],
        infoTip: '',
        tip_num: '',
        loading: false
      }
    },
    mounted() {
      this.roleData();
      this.productData();
      if (this.mid) {
        this.getDetail();
      }
    },
    methods: {
      getDetail() {
        let that=this;
        this.loading = true;
        getDetail(this.mid).then(res => {
          that.setData(res);
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      },


      //商品列表
      productData() {
        let that = this;
        listAllData().then(res => {
          that.productList = res ? res : [];
        }).catch((e) => {
          that.productList = [];
        });
      },


      //角色列表
      roleData(){
        let that=this;
        getAllList().then(res => {
          that.roleList = res ? res : [];
        }).catch((e) => {
          that.roleList = [];
        });
      },

      setData(obj) {
        this.roleId=obj.roleId;
        this.productId = obj.productId;
        this.price=obj.price
      },

      // 确认编辑
      confirmEdit() {
        if (this.roleId === '') {
          this.setTip(1, '请选择角色！');
        } else if (this.productId=== '') {
          this.setTip(2, '请选择商品！');
        } else if (this.price === '') {
          this.setTip(3, '请输入价格！');
        }else {
          this.sendInfo();
        }
      },

      sendInfo() {
        let that = this;
        that.loading = true;
        let data = {
          roleId:that.roleId,
          productId:that.productId,
          price:that.price
        };
        if (that.mid) {
          data.id = that.mid;
          updateData(data).then(res => {
            that.closePopup(true);
            that.$message.success({
              message:'操作成功！',
              duration:1500
            });
          }).catch((e) => {
            that.loading = false;
          });
        }else {
          addData(data).then(res => {
            that.closePopup(true);
            that.$message.success({
              message:'操作成功！',
              duration:1500
            });
          }).catch((e) => {
            that.loading = false;
          });
        }
      },


      setTip(num, text) {
        this.tip_num = num;
        this.infoTip = text
      },

      // 关闭
      closePopup(refresh) {
        this.$emit('listenToChild', {refresh: refresh})
      }
    }
  }
</script>

<style scoped>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #60BAE7;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #DCDFE6;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px solid #DCDFE6;
    border-radius: 6px;
  }

  .avatar {
    max-width: 210px;
    min-width: 60px;
    height: 100px;
    display: block;
    border-radius: 6px;
    margin-right: 15px;
    border: 1px solid #bbb;
  }
</style>
